<template>
  <view class="content-info">
    <view class="content-info-custom" @click="gotoTimer('自定义', '自定义')">
      <view>自定义运动</view>
    </view>
    <view class="content-info-list" v-for="(item, i) in projectList" :key="i">
      <view class="list-title">{{item.title}}</view>
      <view class="list-inner">
        <scroll-view scroll-x style="white-space: nowrap;">
          <view class="list-item" v-for="(item2, i2) in item.project" :key="i2" @click="gotoTimer(item.title, item2)">
            <view class="gray-border"></view>
            <view>{{item2}}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "timer-classification",
    data() {
      return {
        projectList: [{
          title: '胸部',
          project: ['俯卧撑', '哑铃卧推', '杠铃卧推', '上斜卧推', '飞鸟', '宽距俯卧撑', '半泵式俯卧撑', '圆环俯卧撑', '单臂俯卧撑', '靶心俯卧撑']
        }, {
          title: '背部',
          project: ['引体向上', '仰卧引体向上', '哑铃弯举', '简单硬拉', '杠铃划船', '哑铃划船', '拉力器划船', '低位划船', '拉力器下拉', '单臂哑铃划船']
        }, {
          title: '腹部',
          project: ['仰卧起坐', '平板支撑', 'V字船式', '腹肌滚轮', '垫球腹肌滚动', '坐姿踢腿卷腹', '反向Crunch', '三头肌翘板', '倒立腹卷', '双腿抬高卷腹']
        }, {
          title: '腰部',
          project: ['消脂腰身转', '死角蹲踞式', '俯卧开合', '旋转体侧桥', '侧弯船式', '坐姿单腿腰部扭转', '圆盘旋转体扭转', '腹部蓝鲸', '俯卧交替腿抬', '倒立提背摸脚']
        }, {
          title: '肩部',
          project: ['哑铃侧平举', '哑铃推举', '杠铃前平举', '肩部推举', '哑铃耸肩', '单臂推举', '坐姿推举', '后平举', 'L字伸展', '背撑']
        }, {
          title: '手臂',
          project: ['弯举', '杠铃臂屈伸', '哑铃锤式弯举', '提腕弯举', '双臂弯举', '小哑铃平地卧推', '小哑铃腕弯举', '哑铃三头肌下压', '杠铃斜板弯举', '单臂颈后杠铃上压']
        }, {
          title: '腿部',
          project: ['深蹲', '哑铃箭步蹲', '前踢深蹲', '哑铃后蹲', '哑铃弯举', '哑铃侧踢', '哑铃弓箭步', '哑铃切换深蹲', '坐姿推腿', '单腿蹲跳']
        }, {
          title: '臀部',
          project: ['深蹲', '臀桥', '小燕飞', '哑铃深蹲', '相扑深蹲', '静态臀桥', '靠墙站立', '深蹲交替提膝', '哑铃相扑深蹲', '高脚杯深蹲']
        }, {
          title: '颈部',
          project: ['仰卧颈部伸展', '俯卧颈部伸展', '颈后伸展', '颈部侧屈伸展', '旋转颈部拉伸', '颈部滚轮放松', '双手过肩拉伸', '颈部旋转', '颈部前倾抱膝',
            '双手后伸颈部伸展'
          ]
        }],
      };
    },
    methods: {
      // 点击运动项目跳转到计时器界面
      gotoTimer(title, name) {
        uni.navigateTo({
          url: '../../subpkg/timer_time/timer_time?title=' + encodeURIComponent(title) + '&name=' + encodeURIComponent(name)
        })
      }
    }
  }
</script>

<style lang="scss">
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .content-info {
    padding-bottom: 10rpx;

    // 自定义运动盒子
    .content-info-custom {
      // width: 700rpx;
      height: 80rpx;
      margin: 30rpx;
      border-radius: 15rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11pt;
      font-weight: bold;
      background-color: #fba007;
      color: white;
      box-shadow: 0px 1px 2px 0.1px #ddd;
    }

    // 分类列表
    .content-info-list {
      font-size: 11pt;
      margin: 30rpx;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      background-color: #f8f8f8;
      border-radius: 15rpx;
      box-shadow: 0px 1px 2px 0.1px #ddd;
      // border: 1px solid red;

      .list-title {
        height: 50rpx;
        line-height: 50rpx;
        border-left: 5px solid #fba007;
        padding-left: 20rpx;
        margin: 10rpx 0rpx 10rpx 23rpx;
        font-weight: bold;
      }

      .list-inner {
        border-top: 2px solid #eee;

        .list-item {
          position: relative;
          display: inline-block;
          letter-spacing: 1px;
          // margin: 20rpx 18rpx;
          margin: 20rpx 23rpx 20rpx 0rpx;
          padding: 10rpx 0;
          // background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
          // box-shadow: 0px 2px 4px 0.1px #c9c9ca;
          // border: 1px solid #eee;
          border-radius: 15rpx;
          // color: white;
          background: #eee;
          z-index: 2;
          // border-cl: 1px solid red;

          .gray-border {
            position: absolute;
            top: -22%;
            left: 5%;
            width: 180rpx;
            height: 8rpx;
            border-radius: 15rpx;
            background-color: whitesmoke;
            z-index: -1;
          }
        }

        .list-item:first-child {
          margin-left: 23rpx; // 去除最后一个元素的右侧间距
        }

        .list-item view {
          width: 200rpx;
          margin: 10rpx auto;
          font-size: 10pt;
          text-align: center;
        }
      }
    }
  }
</style>